<script setup lang="tsx">
import { reactive, ref } from 'vue';
import dayjs from 'dayjs';
import { getHomeTaskList } from '@/service/api';
import { useRouterPush } from '@/hooks/common/router';
defineOptions({
  name: 'CreativityBanner'
});

const routerPush = useRouterPush();

const tableData = ref<any[]>([]);
const columns = [
  {
    key: 'dataIndex',
    dataIndex: 'dataIndex',
    title: '序号',
    width: 65,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'dateSerialNumber',
    dataIndex: 'dateSerialNumber',
    title: '流水号',
    align: 'center',
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      return (
        <a class="color-blue" onClick={() => goPage(record)}>
          {record.dateSerialNumber}
        </a>
      );
    }
  },
  {
    key: 'noticeTitle',
    dataIndex: 'noticeTitle',
    title: '标题',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'noticeDescription',
    dataIndex: 'noticeDescription',
    title: '内容',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'noticeCompletionStatus',
    dataIndex: 'noticeCompletionStatus',
    title: '状态',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 80,
    customRender: ({ record }) => {
      return ['未完成', '已完成'][record.noticeCompletionStatus];
    }
  },
  {
    key: 'createTime',
    dataIndex: 'createTime',
    title: '时间',
    align: 'center',
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      return dayjs(record.upkeepEndTime).format('YYYY-MM-DD HH:mm:ss');
    }
  }
];

function goPage(record: any) {
  routerPush.routerPush(record.noticeUrl);
}

const pagination = reactive({
  current: 1,
  pageSize: 10,
  showSizeChanger: true,
  pageSizeOptions: ['10', '50', '100', '200', '300', '500'],
  showQuickJumper: true,
  showTotal: (total: number) => {
    return `共${total}条`;
  },
  total: 0,
  onChange: async (current: number, size: number) => {
    pagination.current = current;
    pagination.pageSize = size;
    getData();
  }
});

const loading = ref(false);
function getData() {
  loading.value = true;
  getHomeTaskList({
    pageNum: pagination.current,
    pageSize: pagination.pageSize,
    dataFlag: '1'
  })
    .then(({ data, error }) => {
      if (!error) {
        data?.list.forEach((item: any, index: number) => {
          item.dataIndex = index + 1;
        });
        tableData.value = data?.list;
        pagination.total = data?.total;
      }
    })
    .finally(() => (loading.value = false));
}

getData();
</script>

<template>
  <ACard
    title="任务中心"
    :bordered="false"
    size="small"
    class="h-400px flex-col-stretch card-wrapper"
    :body-style="{ flex: 1, overflow: 'hidden' }"
  >
    <ATable
      :data-source="tableData"
      :columns="columns"
      bordered
      class="h-full"
      :pagination="pagination"
      :loading="loading"
      :scroll="{ y: 'auto' }"
    ></ATable>
  </ACard>
</template>

<style scoped></style>
